<template>
  <div class=''>
    <p>问答</p>
    <p>问答</p>
    <p ref="refP">d:{{d}}</p>
    <p>问答</p>
    <button @click="hClick">更改d的内容成2</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: { },
  components: { },
  data () {
    return {
      d: 1
    }
  },
  methods: {
    hClick () {
      // 数据更新是异步的
      // 第27行修改了数据，则视图不会在第31行时，得到更新。
      // 它会在 “下一批更新视图” 时去更新
      console.log(this.$refs.refP.innerHTML) // d:1
      this.d = 2
      // this.d = 3
      // this.d = 12
      // this.d = 30
      console.log(this.$refs.refP.innerHTML) // d:1

      // 希望“立即”得知，更新后的视图，则需要调用nextTick
      this.$nextTick(() => {
        console.log(this.$refs.refP.innerHTML)
      })
    }
  }
}
</script>

<style scoped lang='less'></style>
